<template>
  <CloudSelect
    v-model="value"
    placeholder="Select users3443"
    style="width: 100%"
    option-label-prop="label"
    dropdownClassName="doc-load-cloud-select-test-option"
  >
    <CloudSelectOption
      v-for="d in testData"
      :key="d.value"
      :disabled="d.disabled"
      :label="d.label"
    >
      <div class="option-text" :title="d.title">
        {{ d.title }}
      </div>
    </CloudSelectOption>
  </CloudSelect>
</template>
<script>

export default {
  title: '9.定制回填内容',
  subTitle: '使用 optionLabelProp 指定回填到选择框的 Option 属性。',
  data() {
    return {
      testData: [
        {
          title: '经销商',
          label: 'label1',
          value: 1
        }, {
          title: '测试超出超出测试超出超出测试超出超出测试超出超出测试超出超出测试超出超出测试超出超出测试超出超出测试超出超出测试超出超出测试超出超出测试超出超出测试超出超出测试超出超出测试超出超出测试超出超出测试超出超出测试超出超出测试超出超出测试超出超出测试超出超出测试超出超出测试超出超出测试超出超出测试超出超出测试超出超出测试超出超出测试超出超出测试超出超出测试超出超出测试超出超出测试超出超出测试超出超出测试超出超出测试超出超出测试超出超出测试超出超出测试超出超出测试超出超出测试超出超出测试超出超出测试超出超出测试超出超出我是结尾！',
          value: 2,
          label: 'label2'
        },
        {
          title: '服务商',
          label: 'label3',
          value: 3,
          disabled: true,
        },
        {
          title: '内部运营',
          label: 'label4',
          value: 4,

        },
      ],
      value: undefined,
    };
  },
  computed: {
  },
  methods: {
  },
};
</script>
<style lang="scss">
.doc-load-cloud-select-test-option {
  .option-text {
    word-break: break-all;
    word-wrap: break-word;
    // white-space: pre-wrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .ant-select-dropdown-menu-item {
    white-space: normal;
  }
}
</style>